import React, { useEffect, useState } from 'react'
import { useHistory } from 'umi';
import { List, Image, InfiniteScroll } from 'antd-mobile'
export default function NowPlaying() {

  const history = useHistory();
  const [list, setlist] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [pageNum, setPageNum] = useState(1);



  useEffect(() => {
    fetch("https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=6830019",
      {
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16722220591298527527370753"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      })
      .then(res => res.json())
      .then(
        res => {
          console.log(res.data.films);
          setlist(res.data.films);
          setPageNum(pageNum + 1)
        }
      )
    return () => {
    }
  }, [])

  function clickFilm(value: any) {
    console.log(value)
    history.push(`/detail/${value}`);
  }

  const loadMore = async () => {

    fetch(`https://m.maizuo.com/gateway?cityId=110100&pageNum=${pageNum}&pageSize=10&type=1&k=6830019`,
      {
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16722220591298527527370753"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      })
      .then(res => res.json())
      .then(
        res => {
          console.log(res.data.films);
          setlist([...list, ...res.data.films]);
          setPageNum(pageNum + 1)
          setHasMore(res.data.films.length > 0)
        }
      )
  };
  return (
    <div>
      <List>
        {list.map(user => (
          <List.Item
            style={{}}
            onClick={() => { clickFilm(user.filmId) }}
            key={user.filmId}
            prefix={
              <Image
                style={{ padding: "5px" }}
                src={user.poster}
                // style={{ borderRadius: 20 }} 圆角
                fit='cover'
                width={80}
              />
            }
            description={
              <div>
                <div>观众评分{user.grade}</div>
                <div>主演：****</div>
                <div>{user.nation} | {user.runtime}分</div>
              </div>
            }
          >
            {user.name}
          </List.Item>
        ))
        }

      </List >
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

    </div>
  )
}
